<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">
      {{ pageTitle }}
      <span class="text-subtitle1">{{ pageSubTitle }}</span>
    </div>
    <div class="q-pa-sm shadow-2 q-mb-md">
      <div class="q-gutter-sm">
        <q-btn @click="detailNav.goBackToList" color="primary" icon="arrow_back" outline title="返回" />
        <q-btn :disable="loadingState" :loading="loadingState" @click="loadModelData" color="primary" dense
          icon="refresh" outline title="刷新" />
      </div>
    </div>
    <div class="shadow-2 q-mb-sm">
      <q-banner class="text-white bg-red q-mt-sm" dense inline-actions v-if="serverErrorMessage">
        {{ serverErrorMessage }}
        <template v-slot:action>
          <q-btn @click="serverErrorMessage=''" dense flat icon="close" size="sm" />
        </template>
      </q-banner>
      <form-field-group title="主要信息" :model-with-create-update="$d.form" model-id="queryId" class="q-mt-sm">
        <div class="q-pa-sm">
          <div class="row q-col-gutter-sm">
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
              <span>是否成功</span>
              <easy-input :model-value="$d.form.isSuccess?'是':'否'" readonly/>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
              <span>分页大小</span>
              <easy-input :model-value="$d.form.size" readonly/>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
              <span>当前页</span>
              <easy-input :model-value="$d.form.current" readonly/>
            </div>
          </div>
          <div class="row q-col-gutter-sm q-pt-sm">
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
              <span>仓库编码</span>
              <easy-input :model-value="$d.form.warehouseCode" readonly/>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
              <span>料号</span>
              <easy-input :model-value="$d.form.skuNo" readonly/>
            </div>
            <div class="col-12">
              <span>错误信息</span>
              <easy-input :model-value="$d.form.backMsg" readonly type="textarea" :rows="3"/>
            </div>
            <div class="col-12">
              <span>原始请求数据</span>
              <easy-input :model-value="$d.form.rawData" readonly type="textarea" :rows="6"/>
            </div>
          </div>
        </div>
      </form-field-group>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'InvLog'
}
</script>

<script lang="ts" setup>

import {reactive, ref} from 'vue'
import {InventoryQueryInfo} from 'src/defs/sf/invLog'
import {useDetailHelper} from '@njt/foundation/hooks/detailHelper'
import {useTitleHelper} from '@njt/foundation/hooks/titleHelper'

const pageTitle = '库存查询'
useTitleHelper(pageTitle)
const $d = reactive({
  form: {} as InventoryQueryInfo
})

let serverErrorMessage = ref('')
let loadingState = ref(false)

const loadModelData = function () {
  serverErrorMessage.value = ''
  loadingState.value = true
  $f.axios
    .get<InventoryQueryInfo>('/mhlbc/sf/get-inventory-query-by-id/' + detailInfo.itemId)
    .then((resp) => {
      $d.form = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      loadingState.value = false
    })
}

//region FPS配置
const {
  detailInfo,
  detailStatus,
  detailNav
}  = useDetailHelper('/sf/inv-query-log',
  $d.form,
  null,
  '/sf/inv-query-log',
  '/sf/inv-query-log/detail',
  null,
  null,
  loadModelData,
  serverErrorMessage
)
const {
  pageSubTitle
} = detailStatus

</script>

<style scoped>

</style>